﻿@model VisibilityModel
@{
    ViewBag.Title = "Visible";
}

<h2>Visible</h2>

<p>The visible binding causes the associated DOM element to become hidden or visible according to the value you pass to the binding.</p>
<p><a href="http://knockoutjs.com/documentation/visible-binding.html" target="_blank">http://knockoutjs.com/documentation/visible-binding.html</a></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.VISIBLE_VIEW_MODEL, Html.CreateVisiToggler("show the samples view model C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))
<br />
@Html.VisiTogglerFromPartial(CodeSamplePartials.VISIBLE_CONTROLLER, Html.CreateVisiToggler("show the samples controller C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))


<h3>Sample #1</h3>

<div @Html.KoAttrVisible(m => m.ShouldShowMessage)>
    You will see this message only when "shouldShowMessage" holds a true value.
</div>

@Html.VisiTogglerFromPartial(CodeSamplePartials.VISIBLE1, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<h3>Sample #2</h3>

<div @Html.KoAttrVisible(m => m.MyValues.Length > 0)>
    You will see this message only when 'myValues' has at least one member.
</div>

@Html.VisiTogglerFromPartial(CodeSamplePartials.VISIBLE2, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<p>&nbsp;</p>
<p>Next &gt; @Html.ActionLink("Text", "Text", "Examples")</p>


@Model.ApplyBindingsScript(KoBindingOptions.IncludeData)